
import { s_getUserDefine, s_getUserdefine_doc, s_saveUserDefine, s_saveUserdefine_doc, s_updateUserdefine_doc } from '@/services/basis';
import { ActionType, ProCard, ProColumns, ProForm, ProFormDatePicker, ProFormDigit, ProFormInstance, ProFormRadio, ProFormSelect, ProFormText, ProTable } from '@ant-design/pro-components';
import { useRequest,useModel } from '@umijs/max';
import {Table,Tabs,TabsProps,Button,Space,Checkbox,Radio,Card,List, Col, Row, Form, Modal, Input, Select, Drawer, message} from 'antd';
import useModal from 'antd/es/modal/useModal';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import moment from 'moment';
import { useRef, useState } from 'react';

//用户自定义项表，右侧
// function UserDefineTable({tdata,setSelectedRecord,table_ref}){
function UserDefineTable(props:any){
//表格：1类型，2列，3数据
interface DataType{
    id:number,
    source_type:number,//1物料，2供应商，3客户
    code:string,
    name:string,
    value_type:number,//1整数，2小数，3文本，4日期，5附件,6图片，7PDF
    len:number,
    input_style:number,//1录入，2自定义档案，3系统档案
    ismust:number,   //1是，0否
    status:number,    //1启用，2冻结，3删除
    operate_time:string,
    operater_code:string,
    operater_name:string,
}

const columns:ProColumns<DataType>[]=[
    {
        dataIndex:'source_type',
        title:'数据对象',
        render:(text)=>{
            switch(text){
                case 1: return <>物料</>;
                case 2: return <>供应商</>;
                case 3: return <>客户</>;
            }
        },
    },{
        dataIndex:'code',
        title:'编码',
    },{
        dataIndex:'name',
        title:'名称',
    },{
        dataIndex:'value_type',
        title:'值类型',
        render:(text)=>{
            switch(text){
                case 1: return <>整数</>;
                case 2: return <>小数</>;
                case 3: return <>文本</>;
                case 4: return <>日期</>;
                // case 5: return <>附件</>;
                // case 6: return <>图片</>;
                // case 7: return <>PDF</>;
            }
        },
    },{
        dataIndex:'len',
        title:'长度',
    },{
        dataIndex:'input_style',
        title:'取值方式',
        render:(text)=>{
            switch(text){
                case 1: return <>录入</>;
                case 2: return <>自定义档案</>;
                case 3: return <>系统档案</>;
            }
        },
    },{
        dataIndex:'ismust',
        title:'是否必填',
        render:(text)=>text===1?<>是</>:<>否</>,
    },{
        dataIndex:'operate_time',
        title:'操作时间',
        render:(text)=>moment(moment(text?.toString()).toDate()).format('YYYY-MM-DD'),
    },
    {
        dataIndex:'operater_name',
        title:'操作人',
    },{
        dataIndex:'status',
        title:'状态',
        render:(text)=>text===1?<>启用</>:<Space style={{color:'red'}}>{text===2?<>停用</>:<>删除</>}</Space>,
    },
];
 return (
    <ProTable 
    dataSource={props.tdata} 
    columns={columns} 
    rowKey='id' 
    rowSelection={{
        type:'radio',
        onChange:(selectedKeys,selectedRows)=>props.setSelectedRecord(selectedRows),
    }}
   // onRow={(record)=>{return{onClick:()=>setSelectedCode({source:record.source_type,code:record.code,id:record.id})}}} />
    actionRef={props.table_ref}
    />
   );

}

//自定义数据对象列表，左侧-- 注意：表中有x_id参数，在实际使用时要传入
//参数：1数据对象号，表示类型；2设置数据对象，3设置左侧单击后右侧取值
//  function Itemlist({selecteItem,setSelectedItem,setTdata}){
function Itemlist(props:any){
    async function getUserdefine(code:any){
        props.setSelectedItem(code);
       const x=await s_getUserDefine({x_id:1,source:code,code:'999'});
       props.setTdata(x.data);

    }
    
    return(
        <List>
            <List.Item onClick={()=> getUserdefine(1)} 
                  style={props.selecteItem===1?{color:'blue'}:{}}>物料信息</List.Item>
            <List.Item onClick={()=> getUserdefine(2)} 
                  style={props.selecteItem===2?{color:'blue'}:{}}>供应商</List.Item>
            <List.Item onClick={()=> getUserdefine(3)}
                  style={props.selecteItem===3?{color:'blue'}:{}}>客户</List.Item>
        </List>
    );
}

//自定义项档案表  
// function DocTable({tdata,setUserdefineDoc}){
 function DocTable(props:any){
          //监控自定义值的变化
        function update(e:any,id:number,type:number){
           const x=props.tdata.map((item:any)=>{
               if(item.id===id){
                   if(type===1)
                       return {...item,value:e.target.value};
                   else
                       return {...item,status:e.target.value};
               }
               else
                  return item;
           });
           //更新新值到state, 同步渲染新表格--关键
           props.setUserdefineDoc(x);
        }

        interface DataType{
            id:number,    //档案ID
            code:string,
            name:string,
            userdefine_id:number,   //自定义项ID
            value:string,
            status:number,
        }
    
     const columns:ColumnsType<DataType>=[
         {
            dataIndex:'id',
            title:'档案id',
         },{
            dataIndex:'value',
            title:'档案值',
            //此处渲染为组件，并且与state更新关联起来，因此能够更新值
            render:(text,record)=><Input value={text} 
                    onChange={(e)=>update(e,record.id,1)}
                    />,
         },{
            dataIndex:'status',
            title:'状态',
            render:(text,record)=><Radio.Group value={text} onChange={(e)=>update(e,record.id,2)}>
                     <Radio value={1}>启用</Radio>
                     <Radio value={2}>冻结</Radio>
                     <Radio value={3}>删除</Radio>
                </Radio.Group>
         },
        ];

        return(
            <Table columns={columns} dataSource={props.tdata} scroll={{x:500}}/>
        );
     }  
    
     interface DataType{
        id:number,
        source_type:number,//1物料，2供应商，3客户
        code:string,
        name:string,
        value_type:number,//1整数，2小数，3文本，4日期，5附件,6图片，7PDF
        len:number,
        input_style:number,//1录入，2自定义档案，3系统档案
        ismust:number,   //1是，0否
        status:number,    //1启用，2冻结，3删除
        operate_time:string,
        operater_code:string,
        operater_name:string,
    }


const App:React.FC=()=>{
    const [tdata,setTdata]=useState();   //表格数据源(全)
     //默认为未选中、即当前选中的自定义行/表格行
    const [selectedRecords,setSelectedRecords]=useState<DataType[]>([]);
    const [selectedItem,setSelectedItem]=useState(1);//设置选择的左侧列表数据显示，1物料，2供应商，3客户
    const [etype,setEtype]=useState(0);  //1新增 ，0修改
    const [editItem,setEditItem]=useState(0);//控制编辑窗口显示，1自定义项，2自定义档案，3系统档案
    const [editDoc,setEditDoc]=useState(false);

    const [userdefineDoc,setUserdefineDoc]=useState();//用于自定义档案的编辑，按自定义项表选择行后，调出对应的档案
   
    //获取表格数据
    useRequest(()=>s_getUserDefine({x_id:1,source:'999',code:'999'}),{
        onSuccess:(data)=>{
            setTdata(data);
        }
    });

     
    const mtable_ref=useRef<ActionType>();//主表格引用，用于更新
    const eform_ref=useRef<ProFormInstance>();//自定义项表单引用
    const eform_doc_ref=useRef<ProFormInstance>();//自定义档案表单

    //新增新自定义项
    function addUserDefine(){
        setEtype(1);//变更为新增 
       setEditItem(1);//显示窗体
       
    }

    //根据选中的行，获取明细数据，用于修改
    function editUserDefine(){
        if(selectedRecords.length===0)
            message.warning('请先选择要编辑的行。');
        else{
            //表单初始始化， 
            setEtype(0);
            setEditItem(1);
            }
    }

    //保存用户自定义项
    async function saveUserDefine(){
        const fdata0=eform_ref.current?.getFieldsValue();
        const fdata={...fdata0,id:selectedRecords[0]?.id,
                      operate_time:moment(moment(fdata0.operate_time).toDate()).format('YYYY-MM-DD HH:mm:ss'),};
        alert(JSON.stringify(fdata));
        const x=await s_saveUserDefine({x_id:1,operater_id:1,etype,fdata});

        if(x.success){
           message.success('数据保存成功。');
           setTdata(x.data);
           mtable_ref.current?.reset?.();
           setEditItem(0);
           setSelectedRecords([]);
        }else
           message.error('数据保存失败，请检查。');
    }

    //定义当前行的自定义档案
    async function editDocument(){
        if(selectedRecords.length===0)
           alert('请先选择要定义档案的自定义项目。');
        else{
           const x0=await s_getUserdefine_doc({source:selectedRecords[0]?.id,code:selectedRecords[0]?.code});
           const x=x0.data;
           //docform.resetFields();
          //alert(JSON.stringify(x0));
         //  alert(JSON.stringify(x));
          // if(x.length>0)
          // const y=tdata.filter((item)=>item.source_type===selectedCode.source&&item.code===selectedCode.code);
          // alert(JSON.stringify(tdata));
           //alert(JSON.stringify(selectedCode));
           //  docform.setFieldsValue({userdefine_id:y[0].id,name:y[0].name,code:y[0].code});
           setUserdefineDoc(x);
           //显示弹出框
           setEditItem(2);
        }
    }

    //保存自定义档案
    async function saveDocument(){
        //对表格的修改，进行保存userdefineDoc。注意：单独添加档案值，另在addDocValue中完成。
       // alert(JSON.stringify(userdefineDoc));
       //此处仅为修改doc表格的功能
      // alert(JSON.stringify(userdefineDoc));
        const x=await s_updateUserdefine_doc({operater_id:1,fdata:userdefineDoc});
        if(x.success){
           message.success('数据保存成功。');
           setEditItem(0);
        }else
          message.error('数据保存失败，请检查。');
    }


    //定义当前行的系统档案--暂不定义
    function editDocumentSys(){
        setEditItem(3);
         
    }


    //保存系统档案--暂不定义
    async function saveDocumentSys(){
        setEditItem(0);
        
    }
 
    //addDocValue  增加自定义档案值---用于添加按钮
    async function addDocValue(){//新添加的值
      const newvalue=eform_doc_ref.current?.getFieldValue('new_value');
      //alert(newvalue);
      if(newvalue===undefined)
         message.warning('请先输入要添加的值。');
      else{
        const fdata={userdefine_id:selectedRecords[0]?.id,
                     new_value:eform_doc_ref.current?.getFieldValue('new_value')};
        const x=await s_saveUserdefine_doc({operater_id:1,fdata});
          //alert(JSON.stringify(docform.getFieldsValue()));
        if(x.success){
           message.success('数据保存成功。');
           //更新表格
          // const x0=await s_getUserdefine_doc({source:selectedRecords[0]?.id,code:selectedRecords[0].code});
          // const x=x0.data;
           setUserdefineDoc(x.data); 
        }
        else{
            message.error('数据保存失败，请检查。');
        }
      }}

      //本函数是由左侧列表单击，复位另一个控件表格。
      function setTdata2(itdata:any){
          setTdata(itdata);
          mtable_ref.current?.reset?.();
          setSelectedRecords([]);
      }
    return(
        <Row gutter={8}>
            <Col span={6}>
                  <Card title='数据对象' style={{height:800}}>
                 
                  <Itemlist setSelectedItem={setSelectedItem} 
                  selecteItem={selectedItem}  setTdata={setTdata2}/>
                 </Card>
           </Col>
           <Col span={18}>
               <Card title='用户自定义项列表' style={{height:800}}
                   extra={<Space size='large'>
                    <Button onClick={()=>addUserDefine()}>增加自定义项</Button>
                    <Button onClick={()=>editUserDefine()}>修改自定义项</Button>
                    <Button onClick={()=>editDocument()} 
                         disabled={selectedRecords.length!=0&&selectedRecords[0].input_style==2?false:true}
                        >自定义档案</Button>
                     
                    </Space>}
               >                   
                 
                      <UserDefineTable tdata={tdata} setSelectedRecord={setSelectedRecords} table_ref={mtable_ref}/>

                    <Drawer title='自定义档案' onClose={()=>setEditItem(0)} open={editItem===2?true:false}
                          getContainer={false}  height={700}
                          extra={<Button onClick={()=>saveDocument()}>保存修改</Button>}
                          placement='bottom' destroyOnClose={true}>
                        <ProForm name='eform_doc' formRef={eform_doc_ref}  
                          submitter={{
                            resetButtonProps:{style:{display:'none'}},
                            submitButtonProps:{style:{display:'none'}},
                          }}
                        >
                            <Row gutter={8}>
                               <Col span={8}>
                                    <ProFormText name='userdefine_id' label='自定义项ID' disabled={true} width={300}/>
                                </Col>
                                <Col span={8}>
                                    <ProFormText name='code' label='自定义项编码' width={300}/>
                                </Col>
                                <Col span={8}>
                                    <ProFormText name='name' label='自定义项名称' width={300}/>
                                </Col>
                           </Row>
                           <Row>
                           <Col span={12}>
                                <DocTable tdata={userdefineDoc} setUserdefineDoc={setUserdefineDoc}/>
                           </Col>
                           <Col span={3}></Col>
                           <Col span={6} style={{textAlign:'left' }}>
                            <ProFormText name='new_value' label='新值' width={300}/>
                            <Button style={{width:100}} onClick={()=>addDocValue()} >+添加</Button>
                           </Col> 
                            </Row>
                        </ProForm>
                    </Drawer>
               </Card>

               <Modal  onCancel={()=>setEditItem(0)}  okButtonProps={{hidden:true}} cancelButtonProps={{hidden:true}}
                 open={editItem===1?true:false} width='80%' closable={true} maskClosable={false} destroyOnClose={true}
                  >
                    <ProCard title={etype===1?'新增自定义项':'编辑自定义项'} style={{marginLeft:10}}
                     extra={<Space size='large'>
                        <Button onClick={()=>saveUserDefine()}>保存</Button>
                        <Button onClick={()=>setEditItem(0)}>取消</Button>
                     </Space>}
                    >
                    <ProForm formRef={eform_ref}   
                        name='eform'
                        submitter={{
                            resetButtonProps:{style:{display:'none'}},
                            submitButtonProps:{style:{display:'none'}},
                        }}
                        initialValues={etype===0?{...selectedRecords[0]}
                                       :{status:1,ismust:0,value_type:3,input_style:2,
                                        source_type:selectedItem,operate_time:moment().toDate()}}
                        >
                         <Row gutter={80}>
                             <Col span={10}>
                                 <ProFormText name='id' label='ID' disabled={true}   width={300}/>
                                 <ProFormSelect name='source_type' label='数据对象' 
                                       options={[{value:1,label:'物料'},{value:2,label:'供应商'},{value:3,label:'客户'},]}
                                       width={300}/>
                                 <ProFormText name='code' label='编码' width={300}/>
                                 <ProFormText name='name' label='名称' width={300}/>
                                 <ProFormRadio.Group name='value_type' label='值类型'  
                                     options={[{value:1,label:'整数'},{value:2,label:'小数'},{value:3,label:'文本'},
                                               {value:4,label:'日期'},{value:5,label:'附件'},
                                               {value:6,label:'图片'},{value:7,label:'PDF'}]}
                                      width={300}/>
                                <ProFormDigit name='len' label='长度'  width={300}/>
                           </Col>
                           <Col span={10}>
                                 <ProFormRadio.Group name='input_style' label='取值方式'  
                                        options={[{value:1,label:'手工录入'},{value:2,label:'自定义档案'},{value:3,label:'系统档案'}]}
                                        width={300}/>
                                 <ProFormRadio.Group name='ismust' label='是否必输' 
                                        options={[{value:1,label:'必输'},{value:0,label:'可选'}]}
                                       width={300}/>
                                  <ProFormRadio.Group name='status' label='状态' 
                                        options={[{value:1,label:'启用'},{value:2,label:'停用'},{value:3,label:'删除'}]}
                                        width={300}/>
                                  <ProFormDatePicker name='operate_time' label='操作日期'  width={300}/>
                                  <ProFormText name='operater_code' label='操作人'  width={300}/>  
                            </Col>
                        </Row>
                  </ProForm>
                  </ProCard>
                </Modal>


           </Col>
        </Row>
    );
}

export default App;
